<template>
	<qiun-data-charts type="ring" :opts="RingOpt" :chartData="showData" background="rgba(0,0,0,0)" />
</template>

<script setup>
	import {
		baseOpts
	} from "@/uitls/uChartsOpt.js"
	import {
		ref,
		computed
	} from 'vue'
	import store from '@/store/index.js';
	const props = defineProps({
		data: Object,
		title: String
	})
	const showData = computed(() => {
		if (Object.keys(props.data).length == 0) return props.data
		let datalist = props.data.series[0].data
		return {
			series: [{
				data: takeOtherList(datalist)
			}]
		}
	})
	const takeOtherList = (list) => { // 将一些小的 合并成其他
		let max = 0
		let outerList = []
		let other = {
			name: "other",
			value: 0
		}
		list.forEach(item => {
			if (item.value >= max) max = item.value
		})
		list.forEach(item => {
			if (item.value > max / 10 || item.value == max) outerList.push(item) // 基准
			else {
				other.value += item.value
			}
		})
		outerList.sort((a, b) => b.value - a.value)
		if (other.value > 0) outerList.push(other)
		return outerList
	}
	const fontSize = computed(() => store.state.fontSize)
	const RingOpt = computed(() => { //centerColor: theme.value, 要 跟随改变
		return {
			...baseOpts,
			...{
				dataLabel: false,
				legend: {
					show: true,
					position: "top",
					padding: 0,
					margin: 0,
					fontSize: fontSize.value * 0.5,
					lineHeight: fontSize.value * 1.2,
					itemGap: fontSize.value * 0.5,
				},
				title: {
					name: props.title,
					fontSize: fontSize.value * 1.5,
					offsetY: -fontSize.value * 0.25,
				},
				subtitle: {
					name: "",
				},
				extra: {
					ring: {
						centerColor: "rgba(0,0,0,0)",
						borderColor:"rgba(0,0,0,0)",
						borderWidth: 3,
						activeOpacity: 1,
						activeRadius: 10,
						linearType: "custom",
						labelWidth: fontSize.value,
					}
				}
			}
		}
	})
</script>

<style lang="scss" scoped>

</style>